<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<title>展览</title>		
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script>
		  var html = document.querySelector("html");
	        html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
	        addEventListener("resize", function () {
	         	html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
	        }, false);
		</script>
	</head>
	<body>
	<div class="wrapper">
		<div id="loading">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div>你的技能是否已经载满....</div>
        </div>
		<canvas id="img_canvas" width="320" height="568"></canvas>
		<div id="arrow"></div>
        <div id="music">
            <audio id="audio1" src="video/徐歌阳 - 追梦赤子心.mp3" preload="auto" loop></audio>
        </div>
		<!-- Swiper -->
	    <div class="swiper-container">	
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<ul class="slide_1">
						<li class="slideInLeft animated">
		                	<p>曾经做为前端开发的你</p>
		                    <p>解决PC兼容性而焦头烂额</p>
		                </li>
		                <li class="slideInRight animated">
		                	<p>而今</p>
		                    <p>移动端H5应用疯狂来袭</p>
		                </li>
		                <li class="slideInLeft animated">
		                	<p>你是否已准备充分</p>
		                    <p>学习新技能</p>
		                </li>
		                <li class="slideInRight animated">
		                	<p>曾破茧成蝶、重获新生？</p>
		                </li>
	                </ul>
	            </div>
	            <div class="swiper-slide" id="page">
	            	<ul class="slide_2">
	            		<li class="ball1"></li>
	            		<li class="ball2"></li>
	            		<li class="ball3"></li>
	            		<li class="ball4"></li>
	            		<li class="ball5"></li>
	            		<li class="ball6"></li>
            		</ul>
	            </div>
	            <div class="swiper-slide" id="page2">
	            	  <div class="slide_3"></div>
	            </div>
	            <div class="swiper-slide" id="page3">
	            	<ul class="slide_4">
	                    <li>transform transition rotate scale translate keyframes animation webkitTransitionEnd webkitAnimationIteration elapsedTime perspective…</li>
	                    <li>drawImage lineWidth strokeStyle lineCap globalCompositeOperation moveTo lineTo stroke arc getImageData…</li>
	                    <li>audio autoplay loop paused play pause…</li>
               		</ul>
	            </div>
	            <div class="swiper-slide"></div>
	            <div class="swiper-slide"></div>
	            <div class="swiper-slide"></div>
	            <div class="swiper-slide"></div>

	        </div>
	        <!-- Add Pagination -->
	        <div class="swiper-pagination"></div>
	    </div>
    </div>
	</body>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/zepto.js"></script>
	<script src="js/event.js"></script>
	<script src="js/touch.js"></script>
	<script src="js/index.js"></script>

</html>
